<template>
  <div class="gameSearch">
    <el-form
      :inline="true"
      :model="formData"
      class="demo-form-inline"
      ref="formData"
      style="width:100%"
    >
      <el-form-item>
        <el-select v-model="formData.gameId" filterable placeholder="游戏名">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.gameName"
            :value="item.id"
            style="width:300px"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formData.accountId" placeholder="小号ID"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formData.orderId" placeholder="订单号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="formData.cpOrderId" placeholder="cp订单号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="formData.time"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          style="margin-top:6px"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          format="yyyy-MM-dd"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" class="dataSearch" @click="dataSearch(formData)">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button class="dataExport" @click="dataExport" type="primary" size="mini">
          数据导出
          <i class="el-icon-download el-icon--right"></i>
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { getSearchList } from "@/api/gameManage";
import moment from "moment";
export default {
  data() {
    return {
      formData: {
        gameId: "",
        accountId: "",
        time: [],
        page: 1,
        limit: 20,
        orderId: "",
        cpOrderId: ""
      },
      options: [],
      smallOptions: [],
      loading: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              end.setTime(end.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本周",
            onClick(picker) {
              const start = moment(
                moment()
                  .week(moment().isoWeeks())
                  .startOf("week")
                  .add(1, "days")
                  .valueOf()
              ).format("YYYY-MM-DD");
              const end = moment(
                moment()
                  .week(moment().isoWeeks())
                  .endOf("week")
                  .add(1, "days")
                  .valueOf()
              ).format("YYYY-MM-DD");
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上周",
            onClick(picker) {
              const start = moment(
                moment()
                  .week(moment().isoWeeks() - 1)
                  .startOf("week")
                  .add(1, "days")
                  .valueOf()
              ).format("YYYY-MM-DD");
              const end = moment(
                moment()
                  .week(moment().isoWeeks() - 1)
                  .endOf("week")
                  .add(1, "days")
                  .valueOf()
              ).format("YYYY-MM-DD");
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "本月",
            onClick(picker) {
              const start = moment(
                moment()
                  .month(moment().month())
                  .startOf("month")
                  .valueOf()
              ).format("YYYY-MM-DD");
              const end = moment(
                moment()
                  .month(moment().month())
                  .endOf("month")
                  .valueOf()
              ).format("YYYY-MM-DD");
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "上月",
            onClick(picker) {
              const start = moment(
                moment()
                  .month(moment().month() - 1)
                  .startOf("month")
                  .valueOf()
              ).format("YYYY-MM-DD");
              const end = moment(
                moment()
                  .month(moment().month() - 1)
                  .endOf("month")
                  .valueOf()
              ).format("YYYY-MM-DD");
              picker.$emit("pick", [start, end]);
            }
          }
        ],
        disabledDate: time => {
          return (
            time.getTime() <
            moment(Date.now()).subtract(6, "month") -
              3600 * 1000 * 24 * new Date().getDate()
          );
        }
      }
    };
  },
  mounted() {
    getSearchList().then(res => {
      this.options = res.data.list;
    });
    this.getNowTime();
  },
  methods: {
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      var defaultDate = `${year}-${month}-${date}`;
      this.formData.time = [defaultDate, defaultDate];
    },
    // 查询
    dataSearch() {
      this.$refs.formData.validate(valid => {
        if (valid) {
          this.$store.commit("SET_SEARCH", this.formData);
          this.$emit("searchList", this.formData);
        }
      });
    },
    //导出的方法
    dataExport() {
      let params = {
        gameId: this.formData.gameId,
        accountId: this.formData.accountId,
        startTime: this.formData.time[0],
        endTime: this.formData.time[1]
      };
      let baseurl =
        "https://cpop.zaoyx.com/api/v1/adminrebate/orderManage/orderExport";
      let url = "";
      Object.keys(params).forEach(function(key) {
        let value = params[key];
        if (value) {
          url += key + "=" + value + "&";
        }
      });
      url = url.substring(0, url.length - 1);
      if (url == 0) {
        baseurl = baseurl;
      } else {
        baseurl = baseurl + "?" + url;
      }
      window.open(baseurl);
    }
  }
};
</script>
<style lang="scss" scoped>
.gameSearch {
  width: 92%;
}
.el-form-item {
  margin-bottom: 0;
}
.el-button--primary {
  background-color: #409eff;
  border-color: #409eff;
}
.dataSearch {
  padding: 0 15px;
  height: 30px;
  font-size: 13px;
}
.dataExport {
  font-size: 13px;
}
.el-select-dropdown__item {
  white-space: normal;
  height: auto;
}
.el-date-editor--daterange.el-input,
.el-date-editor--daterange.el-input__inner,
.el-date-editor--timerange.el-input,
.el-date-editor--timerange.el-input__inner {
  width: 250px;
}
.el-input {
  width: 140px;
}
</style>